<template>
  <el-container>
    <el-header height="80px">
      <div class="navLeft">
        <div class="logo">
          <h1>{{ proName }}</h1>
        </div>
        <div class="nav">
          <div v-for="(nav, index) in navList" :key="index" :class="{isShow:!nav.is}">
            <a
              @click="$router.push(`${nav.path}`)"
              :class="{
                activeNav: nav.path.indexOf($route.path.split('/')[2]) != -1,
                
              }"
              >{{ nav.title }}</a
            >
          </div>
        </div>
      </div>
      <div class="navRight">
          <el-button @click="exitLogin">退出</el-button>
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      proName: "扶贫助农政策平台",
      navList: [
        { title: "首页", path: "/frontmain/fhome", is: true },
        { title: "贫困户", path: "/frontmain/fpinkunhu", is: true },
        { title: "扶贫政策", path: "/frontmain/ffupin", is: true },
        { title: "志愿者招聘", path: "/frontmain/fzhiyuanzhe", is: true },
        { title: "留言反馈", path: "/frontmain/fliuyan", is: true },
        { title: "个人中心", path: "/frontmain/fgrzx", is: true },
        {
          title: "后台管理",
          path: "/main",
          is:
            JSON.parse(sessionStorage.getItem("user")).role == "user"
              ? false
              : true,
        },
      ],
    };
  },
    methods: {
        exitLogin(){
            sessionStorage.removeItem('token')
            sessionStorage.removeItem('user')
            this.$router.push('/login')
        }
    },
};
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
}
.el-header {
  display: flex;
  background-color: #253b6e;
  .navLeft {
     display: flex;
     flex: 0.99;
     justify-content: space-around;
    .logo {
      display: flex;
      align-items: center;
      font-size: 1rem;
      h1 {
        color: #d2ecf9;
      }
    }
    .nav {
      display: flex;
      div {
        box-sizing: border-box;
        padding: 0px 10px;
        a {
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #d2ecf9;
        }
      }
      div:hover {
        border-bottom: 3.5px #ffcc99 solid;
      }
      .activeNav {
        color: #ffcc99;
        font-weight: 600;
      }
      .isShow{
        display: none;
      }
    }
  }
  .navRight{
      display: flex;
      align-items: center;
  }
}
.el-main {
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  overflow-x: hidden;
}
</style>